<template>
  <div class="theLogin">
    <div class="theLoginBox relative scrollBar">
      <div class="headerTopMain theLoginMain">
        <div class="theLoginImg">
          <img :src="theLoginImg" alt="">
        </div>
        <div class="theLoginInfo">
          <div class="theLoginPadding relative">
            <div class="theLoginPng">
              <p>
                <router-link :to="{name:'login',query:{stateId:1}}" class="login" :class="{on:$route.query.stateId=='1'}" tag="span">登录</router-link><b>|</b><router-link :to="{name:'register',query:{stateId:2}}" class="register" :class="{on:$route.query.stateId=='2'}" tag="span">注册</router-link>
              </p>
            </div>
            <div class="theLoginFill">
              <p>
                <input type="text" @keyup.enter="login" v-model="submitData.username" placeholder="用户名／手机号"
                       maxlength="12">
              </p>
              <p>
                <input type="password" v-model="submitData.password" placeholder="6-12位密码，含大小写" maxlength="12"
                       @keyup.enter="login">
              </p>
            </div>
            <div class="theLoginChecked">
              <div class="theCheckLeft">
                <div class="registerCheck" v-if="isChecked" @click="checkEvent">
                  <Icon type="android-checkbox"></Icon>
                </div>
                <div class="registerCheck" v-if="!isChecked" @click="checkEvent">
                  <Icon type="android-checkbox-outline-blank"></Icon>
                </div>
                记住用户名
              </div>
              <div class="theCheckRight">
                <router-link :to="{name: 'forget', query: {stateId: 3}}">忘记密码?</router-link>
              </div>
            </div>
            <div class="theLoginBtn">
              <a href="javascript:void(0)" @click="login">登录</a>
            </div>
            <div class="theLoginRes">
              <p>没有账号，
                <router-link :to="{name: 'register', query: {stateId: 2}}">立即注册</router-link>
              </p>
            </div>
            <div class="diamond">
              <img :src="diamondImg" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import './login.scss';

  export default {
    data() {
      return {
        diamondImg: require('../../../assets/images/theUser/login/diamond.png'),
        theLoginImg: require('../../../assets/images/theUser/login/bancc.png'),
        submitData: {
          username: '',
          password: ''
        },
        shackles: false,
        isChecked: false,
      }
    },
    mounted() {
      this.compHeight();
      let that = this;
      $(window).resize(function () {
        that.compHeight();
      });
    },
    activated() {
      this.compHeight();
    },
    deactivated() {
      this.init();
    },
    methods: {
      init() {
        let that = this;
        that.submitData.password = '';
      },
      compHeight() {
        let height = $(window).height();
        $('.theLogin').innerHeight(height);
      },
      checkEvent(){
        this.isChecked = !this.isChecked;
      },
      login() {
        let that = this;
        if (!that.submitData.username) {
          that._Util.showAlert('请输入正确用户名/手机号');
          return;
        }
        if (that.submitData.password === '' || that.submitData.password.length < 6 || that.submitData.password.length > 12) {
          that._Util.showAlert('请输入6-12位密码');
          return;
        }
        let submitDataPaws = that.submitData.password;
        that.initData(submitDataPaws);
      },
      initData(paw) {
        let that = this;
        let submitDataNews = {
          username: that.submitData.username,
          password: that._Util.hexMd5(paw)
        };
        if (that.shackles) return;
        that.shackles = true;
        that._Util.post(that, that._Api.POST_LOGIN, submitDataNews, (data, oldData) => {
          if (oldData.code === -1) {
            that.submitData.password = '';
            that.shackles = false;
            return;
          }
          that._Util.showAlert('登录成功!');
          that.shackles = false;
          that._Util.setItem('loginStatus', true);
          that.$store.state.mutations.loginStatus = true;
          setTimeout(function () {
            that.$router.replace({name: 'index'});
          }, 2000);
        }, (data) => {
          that.shackles = false;
        }, 'post')
      }
    },
    watch: {
      'submitData.username'() {
        this.submitData.username = this.submitData.username.replace(/[\W]/g, '');
      },
      'submitData.password'() {
        this.submitData.password = this.submitData.password.replace(/[\W]/g, '');
      }
    }
  }
</script>
